<%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>查看所有轮播图</title>

    <link href="../layui/css/layui.css" type="text/css" rel="stylesheet">
    <%--layui设置table行高度的方法--%>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
    <script src="../layui/layui.js" type="text/javascript"></script>

    <script type="text/javascript">

        layui.use('table', function () {
            var table = layui.table;
            //执行一个laypage实例
            table.render({
                elem: "#myTable",//写id选择器
                //SpringBoot中直接请求showall,在SpringMVC中请求showall.do
                url: "${pageContext.request.contextPath}/banner/listBanner",//数据接口，请求的地址
                width: 1230,
                page: true,//开启分页

                //开启table表格头部的工具栏区域
                toolbar: '#myToolbar',//id选择器

                //列
                cols: [[
                    {type: "checkbox"},
                    {title: "编号", field: "bannerId"},
                    {title: "图片", field: "bannerImageUrl",templet: "#img"},
                    {title: "轮播图名称", field: "bannerOldName"},
                    {title: "状态", field: "bannerState"},
                    {title: "上传时间", field: "bannerDate"},
                    {title: "轮播图描述", field: "bannerDescription"},
                    {title: "操作", templet: "#caozuo"}

                ]]
            });
        });

        /*------layui.use开始 表单验证-----*/
        layui.use(['form', 'table'], function () {
            var form = layui.form;
            var table = layui.table;

            //当点击提交按钮的时候，会进入到这个函数
            //当所有的验证都通过时，才会进入到这个函数
            //--------------------add-----------
            form.on("submit(add)", function (data) {
                console.log("------1----" + data);
                //FormData不是jQuery对象，是浏览器的对象
                var addForm = new FormData(document.getElementById("addForm"));
                $.ajax({
                    url: "${pageContext.request.contextPath}/banner/insertBanner",
                    //data:data.field  获取表格中的所有数据
                    data: addForm,
                    type: "post",
                    cache: false,//禁止缓存
                    contentType: false,//不要设置头信息
                    processData: false,
                    async: false,
                    success: function (data) {
                        //console.log(data)
                        //1.关闭掉添加弹出层
                        layer.closeAll('page');

                        //2.提示添加成功
                        if (data.insertBanner) {
                            layer.alert("添加成功", {time: 2000});
                        } else {
                            layer.alert("添加失败", {time: 2000});
                        }

                        //3.刷新table
                        table.reload("myTable");


                    }
                });
                return false;//阻止跳转；
            })
            //-------update----------
            //3.表单验证 见上面
            //4.把修改后的数据通过ajax请求响应到页面中...关闭弹出层，提示修改信息，刷新table表格
            form.on("submit(update)", function (data) {
                console.log("------1----" + data);
                //FormData不是jQuery对象，是浏览器的对象
                var addForm = new FormData(document.getElementById("addForm"));

                $.ajax({
                    url: "${pageContext.request.contextPath}/banner/updateBanner",
                    data: addForm,
                    type: "post",
                    cache: false,//禁止缓存
                    contentType: false,//不要设置头信息
                    processData: false,
                    async: false,
                    success: function (data) {
                        console.log(data)
                        //1.关闭掉修改弹出层
                        layer.closeAll('page');

                        //2.提示添修改成功
                        if (data.updateBanner) {
                            layer.alert("修改成功", {time: 2000});
                        } else {
                            layer.alert("修改失败", {time: 2000});
                        }

                        //3.刷新table
                        table.reload("myTable");


                    }
                });
                return false;//阻止跳转；
            })
            /*-----update结束-------*/

        })
        /*------layui.use结束-----*/


        //打开添加弹出框
        function toOpenAddLayer() {
            $("#updateSubmitBtn").hide();
            $("#addForm")[0].reset();
            $("#addSubmitBtn").show();
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: "添加轮播图",
                    content: $("#addForm"),
                    area: ['500px', '500px'],
                    type: 1,
                    maxmin: true
                });
            });
        }

        //修改操作 点击修改的按钮，去执行修改相应的方法
        function toOpenUpdateLayer(id) {
            // alert(id);
            /*1.获取当前行数据--通过ajax向后发送请求，获取当前行数据
            2.把数据填充到修改弹出层中--弹出层显示
            3.表单验证
            4.把修改后的数据通过ajax请求响应到页面中...关闭弹出层，提示修改信息，刷新table表格
            * */
            //1
            $.ajax({
                url: "${pageContext.request.contextPath}/banner/selectBannerById",
                data: "id=" + id,
                success: function (data) {
                //    console.log(data.bannerImageUrl)
                    $("#banId").val(data.bannerId);
                    $("#banName").val(data.bannerOldName);
                    $("#banState").val(data.bannerState);
                    $("#banDesc").val(data.bannerDescription);
                    $(".img0").prop("src",data.bannerImageUrl);
                }
            })
            $("#addSubmitBtn").hide();
            $("#updateSubmitBtn").show();
            //2
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: "修改轮播图",
                    content: $("#addForm"),
                    type: 1,
                    maxmin: true
                });
            });
        }


        //删除一个轮播图对象
        function deleteOne(id) {
            // alert(id);
            layui.use("table", function () {
                //获取table,用于下面重新加载表格信息，也即是刷新
                var table = layui.table;

                if (confirm("确认要删除吗？")) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/banner/multiDelete",
                        data: "ids=" + id,
                        success: function (data) {
                            alert("删除成功！");
                            table.reload("myTable");
                        }
                    })
                }
            })
        }

        //批量删除轮播图
        function doMultiDelete() {

           // console.log("---1----")
            //获取到选中的内容的id===》table模块中找方法
            layui.use(['layer', 'table'], function () {
                var table = layui.table;
           //     console.log("---2----")
                //获取到选中的数据
                var checkStatus = table.checkStatus('myTable'); //idTest 即为基础参数 id 对应的值
                console.log(checkStatus.data) //获取选中行的数据
                var data = checkStatus.data;

                if (data.length == 0) {
                    layer.alert("请选中要删除的数据");
                } else {
                    layer.confirm("确定要删除选中的所有数据", function (index) {
                        //把所有选中的数据的id封装到一个数组中
                        var ids = new Array(data.length);

                        for (var i = 0; i < data.length; i++) {
                            ids[i] = data[i].bannerId;
                        }
                          alert(ids);
                        //执行删除操作
                        $.ajax({
                            url: "${pageContext.request.contextPath}/banner/multiDelete",
                            data: "ids=" + ids,
                            success: function (data) {

                                //删除确认框关闭掉
                                layer.close(index);

                                //删除提示
                                layer.alert(data.multiDelete, {time: 2000});

                                //刷新table
                                table.reload("myTable");
                            }
                        })
                    });
                }
            });

        }


        /*上传图片回显开始*/
        $(function () {
            $(".file0").change(function () {
                var objUrl = getObjectURL(this.files[0]);
                console.log("objUrl = " + objUrl);
                if (objUrl) {
                    $(".img0").attr("src", objUrl);
                }
            });
        })

        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

        /*上传图片回显结束*/


    </script>


    <script type="text/html" id="caozuo">
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.bannerId}}')">
            修改
        </button>
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-danger" onclick="deleteOne('{{d.bannerId}}')">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </script>

    <%--添加展示所有的图片路径--%>
    <script type="text/html" id="img">
        <img src="{{d.bannerImageUrl}}" style="height: 35px;width: 35px;"/>
    </script>


</head>

<body>
<%--table表格放在body最上面--%>
<table id="myTable"></table>

<%--templet选择器--%>
<div id="myToolbar" style="display: none">
        <%--发布，也就是添加拍卖品--%>
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal" onclick="toOpenAddLayer()">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-danger" onclick="doMultiDelete()">
        <i class="layui-icon layui-icon-delete"></i> 批量删除
        </button>
    </div>
</div>


<%--模态框开始--%>
<form class="layui-form" id="addForm" style="display:none" method="post" enctype="multipart/form-data">
    <input type="hidden" readonly name="bannerId" id="banId" value="0" autocomplete="off" class="layui-input" lay-verify="required|bannerId"/>
    <div class="layui-form-item">
        <label class="layui-form-label">图片名称</label>
        <div class="layui-input-block">
            <input type="text" name="bannerOldName" id="banName" placeholder="请输入轮播图名称" autocomplete="off" class="layui-input"
                   lay-verify="required|bannerOldName"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片状态</label>
        <div class="layui-input-block">
            <input type="text" name="bannerState" id="banState" placeholder="请输入轮播图状态" autocomplete="off"
                   class="layui-input"
                   lay-verify="required|auctionUpset"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <input type="text" name="bannerDescription" id="banDesc" placeholder="请输入轮播图描述" autocomplete="off" class="layui-input"
                   lay-verify="required|bannerDescription"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择图片</label>
        <div class="layui-input-block">
            <%--name属性值和controller类的方法内传过来的形参名保持一致--%>
            <input type="file" name="imageUrl" class="file0" id="imageUrl0" placeholder="请输入轮播图图片" autocomplete="off"
                   class="layui-input"
                   lay-verify="required|bannerImageUrl"/>
            <img src="" class="img0" style="width: 35px;height: 35px;"/>
        </div>
    </div>

    <div class="layui-btn-group">
        <button class="layui-btn" lay-submit lay-filter="add" id="addSubmitBtn">添加</button>
        <button class="layui-btn" lay-submit lay-filter="update" id="updateSubmitBtn">修改</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>

</form>
<%--模态框结束--%>

</body>
</html>
